<template>
  <div class="resource-main-box new-page mail-box">
    <div :style="`width: calc((100% - ${sideMenuWidth} - 33px)*2.005/3);height:${height}px;padding:10px`"
      class="show-info " v-if="flg">
      <div
        v-if="notificationService.airlineIds.length > 0 || notificationService.fleetIds.length > 0 || notificationService.modelIds.length > 0 || notificationService.tailnumberIds.length > 0">
        <h3>tails</h3>
        <div class="tails clearfix">
          <template v-for="(v, i) in mytails">
            <div :key="i">
              <span v-if="v == '航空公司' && notificationService.airlineIds.length > 0">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
                <span>{{ v }}：</span>
                {{ findName(v, notificationService.airlineIds) }}
              </span>
              <span v-else-if="v == '机队' && notificationService.fleetIds.length > 0">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
                <span>{{ v }}：</span>
                {{ findName(v, notificationService.fleetIds) }}
              </span>
              <span v-else-if="v == '机型' && notificationService.modelIds.length > 0 && flg">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
                <span>{{ v }}：</span>
                {{ findName(v, notificationService.modelIds) }}
              </span>
              <span v-else-if="v == '机号' && notificationService.tailnumberIds.length > 0">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
                <span>{{ v }}：</span>
                {{ findName(v, notificationService.tailnumberIds) }}
              </span>
            </div>
          </template>
        </div>
      </div>
      <div>
        <h3>Reports/Events</h3>
        <div class="clearfix">

          <p v-if="notificationService.fmc">
            <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
            <span> Flight Management Computer(FMCICFM) Event ：</span>
            {{ notificationService.fmc }}
          </p>

          <p v-if="notificationService.fmcNot">
            <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
            <span> Detect Absence of the above FMC Event ：</span>
            {{ notificationService.fmcNot }}
          </p>

          <p v-if="notificationService.cmc">
            <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">And</span>
            <span> Flight Management Computer(CMCICFM) Event ：</span>
            {{ notificationService.cmc }}
          </p>

          <div>
            <template v-for="(v, i) in myReports">
              <div :key="i">
                <span
                  v-if="v == 'ACMS Reports' && notificationService.acmsList && notificationService.acmsList.length > 0">
                  <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                  notificationService.acmsAction
                  }}</span>
                  <span>{{ v }}：</span>
                  {{ findName(v, notificationService.acmsList) }}
                </span>


                <span
                  v-if="v == 'Snapshop Reports' && notificationService.snapshotList && notificationService.snapshotList.length > 0">
                  <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                  notificationService.snapshotAction
                  }}</span>
                  <span>{{ v }}：</span>
                  {{ findName(v, notificationService.snapshotList) }}
                </span>

                <span
                  v-if="v == 'Star Reports' && notificationService.starList && notificationService.starList.length > 0 && flg">
                  <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                  notificationService.starAction
                  }}</span>
                  <span>{{ v }}：</span>
                  {{ findName(v, notificationService.starList) }}
                </span>
              </div>

            </template>
          </div>

        </div>
      </div>
      <div>
        <h3>Fault Items</h3>
        <div class="clearfix">
          <template v-for="(v, i) in myFaults">
            <div :key="i">
              <span
                v-if="v == 'FDEs to detect' && notificationService.fdeList && notificationService.fdeList.length > 0 ">
                <span
                  style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{notificationService.fdeAction}}</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.fdeList)}}
              </span>

              <span
                v-if="v == 'SMTs to Detect' && notificationService.smtList && notificationService.smtList.length > 0 ">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                notificationService.smtAction }}</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.smtList)}}
              </span>

              <span
                v-if="v == 'Maintenance Memos' && notificationService.mmoList && notificationService.mmoList.length > 0 ">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                notificationService.mmoAction }}</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.mmoList)}}
              </span>

              <span
                v-if="v == 'Maintenance Message' && notificationService.mmsgList && notificationService.mmsgList.length > 0 ">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                notificationService.mmsgAction }}</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.mmsgList)}}
              </span>

              <span
                v-if="v == 'Alert Message' && notificationService.alertList && notificationService.alertList.length > 0 ">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">{{
                notificationService.alertAction }}</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.alertList)}}
              </span>
            </div>
          </template>
        </div>
      </div>
      <div>
        <h3>ATA/Priority/MMSG</h3>
        <div>
          <template v-for="(v, i) in myAta">
            <div :key="i">
              <span
                v-if="v == 'ATAs To Detect' && notificationService.ataTitlesKeys && notificationService.ataTitlesKeys.length > 0 ">
                <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
                <span>{{v}}：</span>{{ findName(v, notificationService.ataTitlesKeys)}}
              </span>
            </div>
          </template>
          <p v-if="notificationFaultltem.fdeEnable || notificationFaultltem.fdeEtops">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Flightt Deck Effects:</span>
              <span v-if="notificationFaultltem.fdeEnable === 1">fdeEnable: {{notificationFaultltem.fdeEnable === 1 ?
              true : false}};</span>
              <span v-if="notificationFaultltem.fdeEtops === 1">ETOPS: {{notificationFaultltem.fdeEtops === 1 ? true :
              false}};</span>
              <span v-if="notificationFaultltem.fdePriority && notificationFaultltem.fdeEnable==1 ">Priority:
                {{notificationFaultltem.fdePriority}};</span>
              <span v-if="notificationFaultltem.fdeActivity.length>0 && notificationFaultltem.fdeEnable==1">Activity:
                {{notificationFaultltem.fdeActivity}};</span>
              <span v-if="notificationFaultltem.fdeDetectedIn.length>0 && notificationFaultltem.fdeEnable==1">Detected
                in: {{notificationFaultltem.fdeDetectedIn}};</span>
            </span>
          </p>
          <p v-if="notificationFaultltem.mmoEnable === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Maintenance Memos:</span>
              <span> Enable: {{notificationFaultltem.mmoEnable === 1 ? true : false}};</span>
              <span v-if="notificationFaultltem.mmoPriority">Priority: {{notificationFaultltem.mmoPriority}};</span>
              <span v-if="notificationFaultltem.mmoActivity.length>0">Activity:
                {{notificationFaultltem.mmoActivity}};</span>
              <span v-if="notificationFaultltem.mmoDetectedIn.length>0">Detected in:
                {{notificationFaultltem.mmoDetectedIn}};</span>
            </span>
          </p>
          <p v-if="notificationFaultltem.smtEnable === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Scheduled Maintenance Tasks:</span>
              <span> Enable: {{notificationFaultltem.smtEnable === 1 ? true : false}};</span>
              <span v-if="notificationFaultltem.smtPriority">Priority: {{notificationFaultltem.smtPriority}};</span>
              <span v-if="notificationFaultltem.smtActivity.length>0">Activity:
                {{notificationFaultltem.smtActivity}};</span>
              <span v-if="notificationFaultltem.smtDetectedIn.length>0">Detected in:
                {{notificationFaultltem.smtDetectedIn}};</span>
            </span>
          </p>
          <p v-if="notificationFaultltem.mmsgEnable === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Correlated MMSGs:</span>
              <span> Enable: {{notificationFaultltem.mmsgEnable === 1 ? true : false}};</span>
              <span v-if="notificationFaultltem.cmmsgPriority">Priority: {{notificationFaultltem.cmmsgPriority}};</span>
              <span v-if="notificationFaultltem.cmmsgActivity.length>0">Activity:
                {{notificationFaultltem.cmmsgActivity}};</span>
              <span v-if="notificationFaultltem.cmmsgActivityParentFault.length>0">Activity of 'parent' fault:
                {{notificationFaultltem.cmmsgActivityParentFault}};</span>
              <span v-if="notificationFaultltem.cmmsgDetectedIn.length>0">Detected in:
                {{notificationFaultltem.cmmsgDetectedIn}};</span>
            </span>
          </p>
          <p v-if="notificationFaultltem.nonEnable === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Non-correlated Maintenance Message(Nuisances):</span>
              <span> Enable: {{notificationFaultltem.nonEnable === 1 ? true : false}};</span>
              <!--              <span>Priority: {{notificationFaultltem.cmmsgPriority}}</span>;-->
              <span v-if="notificationFaultltem.nonCorrNuisanceActivity.length>0">Activity:
                {{notificationFaultltem.nonCorrNuisanceActivity}};</span>
              <!--              <span>Detected in: {{notificationFaultltem.cmmsgDetectedIn}}</span>;-->
            </span>
          </p>
          <p v-if="notificationFaultltem.alertEnable === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Alert-System:</span>
              <span> Enable: {{notificationFaultltem.alertEnable === 1 ? true : false}};</span>
              <span v-if="notificationFaultltem.alertSystemPriority">Priority:
                {{notificationFaultltem.alertSystemPriority}};</span>
            </span>
          </p>
        </div>
      </div>

      <div>
        <h3>Airports</h3>
        <div>
          <p v-if="departureAirport && departureAirport.length > 0">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Departure Airport: </span>
              <span v-for="(item,index) in  departureAirport" :key="index">
                <span>{{index+1}}：机场名：{{ item.name }} &nbsp;&nbsp;</span>
              </span>
            </span>
          </p>
          <p v-if="aerodromeAirport && aerodromeAirport.length > 0">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>Arrival Airport: </span>
              <span v-for="(item,index) in  aerodromeAirport" :key="index">
                <span>{{index+1}}：机场名：{{ item.name }} &nbsp;&nbsp;</span>
              </span>
            </span>
          </p>
        </div>
      </div>
      <div>
        <h3>Delivery Options</h3>
        <div>
          <p v-if="notificationService.enableEmail === 1">
            <span>
              <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
              <span>email:</span>
              <span> Enable Email Notifaction: {{notificationService.enableEmail === 1 ? true : false}};</span>
              <!--              <span>template: {{notificationService.emailTemplateId}}</span>;-->
              <span v-if="notificationService.subject">Custom Subject:{{notificationService.subject}}</span>

            </span>
          </p>

          <p v-if="notificationService.emails.length>0">
            <span style="width:40px;display: inline-block;text-align:left;font-weight: bolder;">AND</span>
            <span>Recipient Email Adress:{{notificationService.emails}}</span>
          </p>
        </div>
      </div>
    </div>
    <!-- 筛选条件与查询 -->
    <a-form-model class="comm-search-f comm-search-x" ref="aa" :model="search"
      :style="`width: calc((100% - ${sideMenuWidth} - 33px)/3);box-shadow: none!important;`">
      <div class="search-left">
        <a-form-model-item label="">
          <a-form-model-item label="">
            <a-input v-model="notificationService.name" placeholder="消息名称" />
          </a-form-model-item>
          <!-- <a-select
            v-model="search.destination"
            show-arrow
            style="width: 100%!important;"
            placeholder="拥有者"
            allow-clear
          >
            <a-icon slot="suffixIcon" :component="require('@/assets/icon/arrow-down-bold.svg')" />
            <a-select-option v-for="selectItem in ownerList" :key="selectItem.id" :value="selectItem.name">
              {{ selectItem.name }}
            </a-select-option>
          </a-select> -->
        </a-form-model-item>

        <!-- <a-form-model-item>
          <a-date-picker
            placeholder="日期"
            style="width: 100%"
          />
        </a-form-model-item> -->
        <a-form-model-item label="Enable" label-align="left" :label-col="labelCol" :wrapper-col="wrapperCol"
          class="label-col">
          <a-checkbox v-model="enabled" class="label-checkbox" />
        </a-form-model-item>
      </div>

      <!-- <div class="search-right">
        <a-form-model-item
          class="label-col label-4-textarea"
          label="所选信息概览"
          label-align="left"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
        >
          <a-input class="info-text" type="textarea" />
        </a-form-model-item>
      </div> -->
    </a-form-model>

    <div class="pb-16 tab-content">
      <a-tabs default-active-key="1" :animated="false" @change="changeTabHandler">
        <a-tab-pane key="1" tab="Tails">
          <div class="air-content">
            <airlineTransfer :airline-list="ftmAirlineList" title="航空公司" ref="b1" />
            <airFleetTransfer class="mt-16" :air-fleet-list="ftmFleetList" ref="b2" title="机队" />
            <airModelTransfer class="mt-16" :air-model-list="ftmPlaneModelList" ref="b3" title="机型" />
            <airtailNumberTransfer class="mt-16" :airtail-number="ftmAirplaneList" ref="b4" title="机号" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="Reports/Events">
          <div class="air-content">
            <div class="reports-top">
              <fcmEvent fmcTitle="Flight Management Computer(FMCICFM) Event" />
              <cmcEvent :cmc-event-list="CmcEventList" />
            </div>
            <div class="reports-bottom">
              <ACMTransfer ref="r1" title="ACMS Reports" />
              <!-- <AHMTransfer /> -->
              <snapshopTransfer ref="r2" :snapshopList="snapshopList" @getSnapshopResult="getSnapshopResult()"
                title="Snapshop Reports" />
              <starTransfer ref="r3" title="Star Reports" @sendClick="sendClick" />
            </div>

          </div>
        </a-tab-pane>
        <a-tab-pane key="3" tab="Fault Items">
          <div class="air-content">
            <FDETransfer ref="f1" title="FDEs to detect" />
            <SMTTransfer ref="f2" title="SMTs to Detect" />
            <MMOTransfer ref="f3" title="Maintenance Memos" />
            <MSGTransfer ref="f4" title="Maintenance Message" />
            <AlertTransfer ref="f5" title="Alert Message" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="4" tab="ATA/Priority/MMSG">
          <div class="air-content">
            <ATA ref="a1" title="ATAs To Detect" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="5" tab="Airports">
          <div class="air-content">
            <aerodromeAirport />
            <airComponent style="margin-top:15px" />
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" tab="Delivery Options">
          <div class="air-content">
            <div class="title">email</div>
            <div class="check-order enabel-email-notifaction">
              <a-checkbox v-model="enableEmail">
                Enable Email Notifaction
              </a-checkbox>
            </div>
            <div style="margin-top:15px">
              <span class="email-tab-6-title" style="">template:</span>
              <a-select style="width: 440px" placeholder="请选择" :value="notificationService.emailTemplateId"
                @change="changeEmailTemplateHandler">
                <a-select-option v-for="item in emailTemplate" :key="item.id" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </div>
            <div class="subject">
              <span class="email-tab-6-title">Custom Subject</span>
              <a-input v-model="notificationService.subject" style="width: 440px" placeholder="请输入" />
            </div>

            <div class="title">Recipient Email Addresses</div>
            <div class="receving-address" style="margin-top:15px">
              <div>
                <div style="padding:5px;background:#F5F7FA;">Recipient Email Adress</div>
                <!--
                <a-button type="primary" size="small">
                    添加地址
                  </a-button>

                 -->
                <a-input-search v-model="value" placeholder="请输入" enter-button="Add Email" size="default"
                  @search="addEmail" />
              </div>

              <div class="receving-address-bottom" style="min-height:100px;">
                <div v-for="(item, index) in addEmailList" :key="index" class="address-bottom-item">
                  <span>{{ item }}</span>
                  <a-icon type="close" @click="delEmailLIstItem(index)" />
                </div>
              </div>
            </div>

          </div>
        </a-tab-pane>
      </a-tabs>
      <div class="btns-content mr-16">
        <!--
          <a-button type="default" ghost style="margin-left:10px">
            帮助
          </a-button>
        -->
        <a-popconfirm title="确认删除?" ok-type="danger" ok-text="确认" cancel-text="取消" @confirm="delItemHandler">
          <a-button v-if="!addFlag" type="danger" style="margin-left:10px">
            删除
          </a-button>
        </a-popconfirm>

        <a-button type="default" style="margin-left:10px" @click="backToEmailIndexHandler">
          取消
        </a-button>
        <a-button v-if="!addFlag" type="primary" style="margin-left:10px" @click="submitEmailHandler(2)">
          另存为
        </a-button>
        <a-button type="primary" style="margin-left:10px" @click="submitEmailHandler(1)">
          保存
        </a-button>
      </div>
    </div>
  </div>
</template>
<script>
import airComponent from '@/components/resourceTool/airInformation';
import aerodromeAirport from '@/components/resourceTool/aerodromeAirport';
import airlineTransfer from './components/tails/airlineTransfer';
import airFleetTransfer from './components/tails/airFleetTransfer';
import airModelTransfer from './components/tails/airModelTransfer';
import airtailNumberTransfer from './components/tails/airtailNumberTransfer';
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex';
import fcmEvent from './components/reports/fcmEvent';
import cmcEvent from './components/reports/cmcEvent';
import ACMTransfer from './components/reports/ACMTransfer';
// import AHMTransfer from './components/reports/AHMTransfer';
import snapshopTransfer from './components/reports/snapshopTransfer';
import starTransfer from './components/reports/starTransfer';
import FDETransfer from './components/faultItem/FDETransfer';
import MMOTransfer from './components/faultItem/MMOTransfer';
import MSGTransfer from './components/faultItem/MSGTransfer';
import SMTTransfer from './components/faultItem/SMTTransfer';
import AlertTransfer from './components/faultItem/AlertTransfer';
import ATA from './components/ATA';
import { message } from 'ant-design-vue';
export default {
  name: 'createNewEmail',
  components: {
    airComponent,
    airlineTransfer,
    airFleetTransfer,
    airModelTransfer,
    airtailNumberTransfer,
    fcmEvent,
    cmcEvent,
    ACMTransfer,
    // AHMTransfer,
    snapshopTransfer,
    starTransfer,
    FDETransfer,
    MMOTransfer,
    MSGTransfer,
    SMTTransfer,
    AlertTransfer,
    ATA,
    aerodromeAirport

  },
  data() {
    return {
      flg: true,
      myReports: [],
      mytails: [],
      myFaults:[],
      myAta:[],
      height: 0,
      addFlag: true,
      search: {},
      ownerList: [], // 拥有者列表
      labelCol: { span: 4 }, // 表单子布局
      wrapperCol: { span: 20 },
      showSaveBtn: false,
      value: '',
      // 以下数据用来当新增邮件页面退出时返回到最初状态（清除正在编辑的所有内容）
      notificationService2: {
        // 需要提交到后台的数据
        // 邮件标头模块
        subject: '',
        enableEmail: 1,
        emails: [],
        emailTemplateId: '',
        enabled: 1,
        name: '',

        // 航班模块
        airlineIds: [], // 航空公司
        fleetIds: [], // 机队列表
        modelIds: [], // 模型列表
        tailnumberIds: [], // 机号列表
        // report模块
        fmc: 'None',
        fmcNot: 'Any combination of FMC events can exist in flight leg',
        cmc: 'None',
        acmsList: [],
        snapshotList: [],
        starList: [],
        // faultItem 模块
        acmsAction: 'AND',
        starAction: 'AND',
        snapshotAction: 'AND',
        // ATA模块
        fdeAction: 'AND',
        fdeList: [],
        mmoAction: 'AND',
        mmoList: [],
        mmsgAction: 'AND',
        mmsgList: [],
        smtAction: 'AND',
        smtList: [],
        alertAction: 'AND',
        alertList: [],
        ataTitles: [],
        // 起飞机场&降落机场
        departureAirportIds: [],
        arrivalAirportIds: []
      },
      notificationFaultltem2: {
        fdeEnable: 1,
        fdeEtops: 1,
        fdeDetectedIn: [],
        fdeActivity: [],
        fdePriority: '',
        mmoEnable: 1,
        mmoPriority: '',
        mmoActivity: [],
        mmoDetectedIn: [],
        smtEnable: 1,
        smtPriority: '',
        smtActivity: [],
        smtDetectedIn: [],
        cmmsgEnable: 1,
        cmmsgPriority: '',
        cmmsgDetectedIn: [],
        cmmsgActivityParentFault: [],
        cmmsgActivity: [],
        nonCorrNuisanceEnable: 1,
        nonCorrNuisanceActivity: [],
        nonCorrNuisanceDetectedIn: [],
        nonCorrNuisancePriority: '',
        alertSystemEnable: 1,
        alertSystemDetectedIn: [],
        alertSystemActivity: [],
        alertSystemPriority: ''

      }
    };
  },
  watch: {
    ftmPlaneModelList: {
      deep: true,
      immediate: true,
      handler(n) {
        console.log(1, n)
        this.refresh()
      }
    },
    StarList: {
      deep: true,
      handler(n) {
        console.log("suibian", n)
        this.refresh();
      }
    }
  },
  computed: {
    ...mapState('fraMonitoring', ['ftmAirlineList', 'ftmFleetList', 'ftmPlaneModelList', 'ftmAirplaneList']),
    ...mapState('emailNotification', [
      'departureAirport',
      'aerodromeAirport',
      'CmcEventList',
      'FmcEventList',
      'snapshopList',
      'StarList',
      'AcmsList',
      'notificationService',
      'notificationFaultltem',
      'enableEmail',
      'emailTemplate',
      'addEmailList',
      'FDEsList',
      'MMOList',
      'MSGList',
      'AlertList',
      'SMTList',
      'ataList'
    ]),
    ...mapGetters('setting', ['sideMenuWidth']),
    enableEmail: {
      get() {
        return ((this.notificationService.enableEmail === '1' || this.notificationService.enableEmail === 1));
      },
      set(v) {
        this.setState({ key: 'notificationService', payload: { ...this.notificationService, enableEmail: v ? 1 : 0 } });
      }
    },
    enabled: {
      get() {
        return !!this.notificationService.enabled;
      },
      set(v) {
        this.setState({ key: 'notificationService', payload: { ...this.notificationService, enabled: v ? 1 : 0 } });
      }
    }
  },

  beforeDestroy() {
    this.setState({ key: 'notificationService', payload: this.notificationService2 });
    this.setState({ key: 'notificationFaultltem', payload: this.notificationFaultltem2 });
    this.setState({ key: 'addEmailList', payload: [] });
    this.setState({ key: 'departureAirport', payload: [] });
    this.setState({ key: 'aerodromeAirport', payload: [] });
  },
  // updated() {
  //   Array.from(Array(3)).forEach((v, i) => {
  //     this.$set(this.myReports, i, this.$refs['r' + (i + 1)].title)
  //   })
  // },
  mounted() {
    this.$nextTick(() => {
      this.height = this.$refs.aa.$el.offsetHeight
    })

    Array.from(Array(4)).forEach((v, i) => {
      this.mytails[i] = {}
      this.$set(this.mytails, i, this.$refs['b' + (i + 1)].title)
    })

    this.getListAirportAll();
    const emailRow = JSON.parse(localStorage.getItem('emailRow'));
    if (emailRow) {
      this.addFlag = false;
      this.setState({ key: 'notificationService', payload: emailRow });
      this.setState({ key: 'notificationFaultltem', payload: emailRow.notificationFaultltem });
      this.setState({ key: 'addEmailList', payload: emailRow.emails });
    } else {
      this.addFlag = true;
    }

    this.setState({ key: 'FDEsList', payload: [] });
    this.setState({ key: 'MMOList', payload: [] });
    this.setState({ key: 'SMTList', payload: [] });
    this.setState({ key: 'MSGList', payload: [] });
    this.setState({ key: 'AlertList', payload: [] });
  },
  methods: {

    ...mapActions('emailNotification', [
      'getCmcEventList',
      'getFmcEventList',
      'getTemplateListByParams',
      'getAtaListAll',
      'submitEmail',
      'deleteItems',
      'getEmailTemplate'
    ]),
    ...mapActions('eventMonitoring', [
      'getListAirportAll'
    ]),
    ...mapMutations('emailNotification', ['setState']),
    refresh() {
      this.flg = false
      setTimeout(() => {
        this.flg = true
      }, 17)
    },
    sendClick() {
      const that = this
      this.$nextTick(() => {
        Array.from(Array(3)).forEach((v, i) => {
          console.log(that.$refs['r' + (i + 1)].title);
          that.$set(that.myReports, i, that.$refs['r' + (i + 1)].title)
        })

      })
    },
    changeEmailTemplateHandler(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, emailTemplateId: e } });
    },
    filterKey(p, list) {
      console.log("key中的参数p：",p);
      console.log("key中的参数list：",list);
      let arr = [], arr1 = []
      p.forEach(v => {
        arr.push(...list.filter(v1 => v1.key === v))
      })
      console.log("arr",arr);
      arr.forEach((v, i) => {
        if (v.name){
          arr1[i] = v.name
        }
         if (!v.name && v.title){
          arr1[i] = v.title
        }
        if (!v.name && !v.title ){
          arr1[i] = v.templateName
        }
      })
      console.log("结果：",arr1);
      return arr1.join(',')
    },
    // n：name,p选中的数据
    findName(n, p) {
      console.log("标题：",n);
      if (n === "航空公司") {  //tails
        console.log("航空公司", this.ftmAirlineList);
        return this.filterKey(p, this.ftmAirlineList)
      } else if (n === "机队") {
        return this.filterKey(p, this.ftmFleetList)
      } else if (n === "机型") {
        return this.filterKey(p, this.ftmPlaneModelList)
      } else if (n === "机号") {
        return this.filterKey(p, this.ftmAirplaneList)
      } else if (n === "ACMS Reports") { // reports
        return this.filterKey(p, this.acmsList)
      } else if (n === "Snapshop Reports") {
        return this.filterKey(p, this.snapshopList)
      } else if (n === "Star Reports") {
        return this.filterKey(p, this.StarList)
      } else if (n === "FDEs to detect"){  // 故障
        console.log("第一", this.FDEsList);
        return this.filterKey(p, this.FDEsList)
      } else if (n === "SMTs to Detect"){
        return this.filterKey(p, this.SMTList)
      } else if (n === "Maintenance Memos"){
        return this.filterKey(p, this.MMOList)
      } else if (n === "Maintenance Message"){
        return this.filterKey(p, this.MSGList)
      } else if (n === "Alert Message"){
        console.log("第五", this.AlertList);
        return this.filterKey(p, this.AlertList)
      } else if (n === "ATAs To Detect"){  //ata
        return this.filterKey(p, this.ataList)
      }

    },
    backToEmailIndexHandler() {
      this.$router.push({ name: '邮件通知' });
    },
    addEmail(e) {
      if (!e.trim()) {
        message.error('不能为空！');
        return;
      }
      const mailArray = this.addEmailList;
      mailArray.push(e);
      this.setState({ key: 'emails', payload: mailArray });
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, emails: mailArray } });
      this.value = '';
    },
    delEmailLIstItem(index) {
      const tmp = [...this.addEmailList];
      tmp.splice(index, 1);
      this.setState({ key: 'addEmailList', payload: [...tmp] });
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, emails: [...tmp] } });
    },

    changeTabHandler(e) {
      switch (e) {
        case '2':
          this.getCmcEventList({ type: 1 });
          this.getCmcEventList({ type: 2 });
          this.getCmcEventList({ type: 3 });
          // this.getFmcEventList();
          this.getTemplateListByParams({ category: 'snapshop' });
          this.getTemplateListByParams({ category: 'ACMS' });
          this.getTemplateListByParams({ category: 'Star' });
          this.getTemplateListByParams({ category: 'AHM' });
          break;
        case '3':
          this.faultSend();
          break;
        case '4':
          this.getAtaListAll();
          this.ataSend();
          break;
        case '6':
          this.showSaveBtn = true;
          this.getEmailTemplate();
          break;
        default:
          this.showSaveBtn = false;
      }
    },
    faultSend(){
      var that = this;
      this.$nextTick(() => {
        Array.from(Array(5)).forEach((v, i) => {
          console.log(that.$refs['f' + (i + 1)].title);
          that.$set(that.myFaults, i, that.$refs['f' + (i + 1)].title)
        })

      })
    },
    ataSend(){
      var that = this;
      this.$nextTick(() => {
        Array.from(Array(1)).forEach((v, i) => {
          console.log(that.$refs['a' + (i + 1)].title);
          that.$set(that.myAta, i, that.$refs['a' + (i + 1)].title)
        })

      })
    },
    async submitEmailHandler(flag) {
      const { name, emails } = this.notificationService;

      if (!name) {
        message.error('请填写消息名称');
        return;
      } else if (!emails.length) {
        message.error('请添加邮件地址');
        return;
      }

      if (this.notificationService.id) {
        // const airlineIds = (this.notificationService?.airline ?? []).flatMap(item => item.airlineId);
        const arrivalAirportIds = (this.notificationService?.airport ?? []).filter(item => item.depOrArr === 'arr').flatMap(item => item.airportId);
        const departureAirportIds = (this.notificationService?.airport ?? []).filter(item => item.depOrArr === 'dep').flatMap(item => item.airportId);
        // const fleetIds = (this.notificationService?.fleet ?? []).flatMap(item => item.fleetId);
        // const modelIds = (this.notificationService?.model ?? []).flatMap(item => item.modelId);
        // const tailnumberIds = (this.notificationService?.airplane ?? []).flatMap(item => item.airplaneId);
        // const fdeListIds = (this.notificationService?.fdeList ?? []).flatMap(item => item.id);
        // const alertListIds = (this.notificationService?.alertList ?? []).flatMap(item => item.id);
        // const mmsgListIds = (this.notificationService?.mmsgList ?? []).flatMap(item => item.id);
        // const mmoListIds = (this.notificationService?.mmoList ?? []).flatMap(item => item.id);
        const newR = {
          ...this.notificationService,
          id: flag === 1 ? this.notificationService.id : undefined,
          notificationFaultltem: { ...this.notificationFaultltem },
          // airline: undefined,
          // airport: undefined,
          // airplane: undefined,
          // createBy: undefined,
          // createTime: undefined,
          // deleted: undefined,
          // fleet: undefined,
          // model: undefined,
          // updateBy: undefined,
          // updateTime: undefined,
          ahmAction: 'And',
          // airlineIds,
          // alertList: alertListIds,
          // fdeList: fdeListIds,
          // mmsgList: mmsgListIds,
          // mmoList: mmoListIds,
          arrivalAirportIds: [...new Set([...(this.notificationService.arrivalAirportIds ?? []), ...arrivalAirportIds])],
          departureAirportIds: [...new Set([...(this.notificationService.departureAirportIds ?? []), ...departureAirportIds])]
          // fleetIds,
          // modelIds,
          // tailnumberIds
        };
        this.setState({ key: 'notificationService', payload: { ...newR } });
        this.setState({ key: 'notificationFaultltem', payload: { ...newR.notificationFaultltem } });
      }
      this.submitEmail({ ...this.notificationService, notificationFaultltem: { ...this.notificationFaultltem } }).then(res => {
        if (res) {
          setTimeout(() => {
            this.$router.push({ name: '邮件通知' });
          }, 500);
        }
      });
    },
    getSnapshopResult(e) {
      console.log('result:' + e);
    },
    // handleChange(nextTargetKeys, direction, moveKeys) {
    //   this.targetKeys = nextTargetKeys;

    //   console.log('targetKeys: ', nextTargetKeys);
    //   console.log('direction: ', direction);
    //   console.log('moveKeys: ', moveKeys);
    // },
    // selectChange() {
    // },
    // handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
    //   this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];

    //   console.log('sourceSelectedKeys: ', sourceSelectedKeys);
    //   console.log('targetSelectedKeys: ', targetSelectedKeys);
    // },
    // handleScroll(direction, e) {
    //   // console.log('direction:', direction);
    //   // console.log('target:', e.target);
    // },
    // handleDisable(disabled) {
    //   // this.disabled = disabled;
    // }

    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    delItemHandler(e) {
      this.deleteItems(this.notificationService.id).then(res => {
        if (res) {
          this.backToEmailIndexHandler();
        }
      });
    },
    handleDisable(disabled) {
      this.disabled = disabled;
    }
  }
};
</script>
<style lang="less" >
@import './index.less';

.subject {
  display: flex;
  margin-top: 15px;
}

.enabel-email-notifaction {
  width: 270px;

  span {
    padding: 0 !important;
  }
}

.email-tab-6-title {
  margin-right: 15px;
  width: 240px;
  display: inline-block;
}

.show-info {
  position: fixed;
  top: 76px;
  right: 15px;
  background-color: #fff;
  overflow-y: auto;

  &.clearfix:after {
    /*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }

  .tails {
    >div {
      // float: left;
    }
  }
}
</style>

